<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        var socket;
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:17000/hello");
            // 相当于于channelReado ev 接受服务端的消息
            socket.onmessage  = function (event) {
                console.log(event.data);
                document.getElementById('responseText').value += event.data + "\n";
            };

            // 相当于连接开启
            socket.onopen = function (event) {
                document.getElementById('responseText').value += "Connection opened.\n";
            };

            // 相当于连接关闭(感知到断开)
            socket.onclose = function (event) {
                document.getElementById('responseText').value += "Connection closed.\n";
            };

            // 发送消息
            function send(message) {
                if (!window.WebSocket) {
                    return;
                }
                if (socket.readyState == WebSocket.OPEN) {
                    socket.send(message);
                } else {
                    alert("The connection is not open.");
                }
            }
        } else {
            alert("Your browser does not support WebSocket");
        }
    </script>
    <form onsubmit="return false" method="post">
        <textarea  name="message" rows="5" cols="40" style="height: 300px; width: 300px"></textarea>
        <input type="button" value="Send" onclick="send(this.form.message.value)">
        <textarea id="responseText" rows="5" cols="40" style="height: 300px; width: 300px"></textarea>
        <input type="button" value="Clear" onclick="document.getElementById('responseText').value=''">
    </form>
</body>
</html>